<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>例子-机器人</title>
  </head>
  <body>
    <canvas width="1200" height="800" id="glcanvas"
      >browser don't support canvas</canvas
    >

    <script src="../../lib/webgl-utils.js"></script>
    <script src="../../lib/webgl-debug.js"></script>
    <script src="../../lib/cuon-utils.js"></script>
    <script src="../../lib/cuon-matrix.js"></script>
    <script src="../../lib//cuon-euler.js"></script>
    <script src="./drawCube.js"></script>

    <script>
      var VSHADER_SOURCE = `
          precision mediump float;
          attribute vec3 a_Position;
          attribute vec4 a_Color;
          uniform mat4 u_Matrix;
          varying vec4 v_Color;
          void main(){
              gl_Position = u_Matrix * vec4(a_Position, 1);
              v_Color = a_Color;
              gl_PointSize = 5.0;
          }
        `;

      var FSHADER_SOURCE = `
          precision mediump float;
          varying vec4 v_Color;
          void main(){
            gl_FragColor = v_Color;
          }
        `;

      /** @type {HTMLCanvasElement} */
      var canvas = document.getElementById("glcanvas");

      /** @type {WebGLRenderingContext} */
      var gl = getWebGLContext(canvas);
      if (!gl) {
        throw new Error("can't get webgl context");
      }

      if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        throw new Error("can't init shader");
      }

      let cube = createCube();
      let modelMatrix = new Matrix4();
      let orthoProjMatrix = new Matrix4();
      let viewMatrix = new Matrix4();

      // var a_Screen_Size = gl.getAttribLocation(gl.program, 'a_Screen_Size');
      // gl.vertexAttrib2f(a_Screen_Size, canvas.width, canvas.height);

      var a_Position = gl.getAttribLocation(gl.program, "a_Position");
      var a_Color = gl.getAttribLocation(gl.program, "a_Color");
      var u_Matrix = gl.getUniformLocation(gl.program, "u_Matrix");
      gl.enableVertexAttribArray(a_Position);
      gl.enableVertexAttribArray(a_Color);

      var positionBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
      gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 28, 0);
      gl.vertexAttribPointer(a_Color, 4, gl.FLOAT, false, 28, 12);
      gl.bufferData(
        gl.ARRAY_BUFFER,
        new Float32Array(cube.positionColors),
        gl.STATIC_DRAW
      );

      var indicesBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
      gl.bufferData(
        gl.ELEMENT_ARRAY_BUFFER,
        new Uint16Array(cube.indices),
        gl.STATIC_DRAW
      );

      var aspect = canvas.width / canvas.height;
      orthoProjMatrix.ortho(-aspect * 4, aspect * 4, -4, 4, 100, -100);
      function render() {
        var copyMatrix = new Matrix4();
        gl.uniformMatrix4fv(
          u_Matrix,
          false,
          copyMatrix.concat(orthoProjMatrix).concat(modelMatrix).elements
        );
        gl.enable(gl.CULL_FACE);
        gl.clearColor(0, 0, 0, 1);
        gl.clear(gl.COLOR_BUFFER_BIT);
        // gl.enable(gl.CULL_FACE);
        // gl.drawArrays(gl.POINTS, 0, 1);
        // 1、添加立方体
        // gl.drawElements(gl.TRIANGLES, 12, gl.UNSIGNED_BYTE, 0);
        gl.drawElements(
          gl.TRIANGLES,
          cube.indices.length,
          gl.UNSIGNED_SHORT,
          0
        );
        requestAnimationFrame(render);
      }

      requestAnimationFrame(render);

      // 2、立方体鼠标交互
      let startX = 0,
        startY = 0,
        currentX = 0,
        currentY = 0;
      let radian = Math.PI / 180;
      let enable = false;
      let euler = new Euler();
      document.body.addEventListener("mousedown", (e) => {
        startX = e.clientX;
        startY = e.clientY;

        enable = true;
      });
      document.body.addEventListener("mousemove", (e) => {
        if (enable) {
          currentX = e.clientX;
          currentY = e.clientY;

          let dx = currentX - startX;
          let dy = currentY - startY;

          euler.x = dy * radian;
          euler.y = dx * radian;

          modelMatrix.setMatrixByEuler(euler);
        }
      });
      document.body.addEventListener("mouseup", (e) => {
        enable = false;
      });

      // 3、层级建模
    </script>
  </body>
</html>
